<template>
  <view>
    <van-dropdown-menu>
      <van-dropdown-item @change="changeType" :value="newsPram.cur_day" :options="option1" />
      <van-dropdown-item @change="changeId" :value="newsPram.company_id" :options="companyList" />
    </van-dropdown-menu>
    <!-- 以下新闻 -->
    <NewsItem :activeList="activeList"></NewsItem>
  </view>
</template>
<script>
let flag = true;
import { mapState} from "vuex";
import { newsListApi } from "@/API/reqNews";
export default {
  data() {
    return {
      // 服务中心数据
      temCenters: [],
      // 基础路径
      baseUrl: this.$baseUrl,
      // 新闻与活动请求参数
      newsPram: {
        type: 1,
        state: 1,
        brand_id: [1],
        company_id: "",
        page: 1,
        pageSize: 10,
        cur_day: true,
      },
      // 新闻列表
      activeList: [],
      currIndex: 1,
      option1: [
        { text: "最新新闻", value: true },
        { text: "全部新闻", value: false },
      ],
      total: 0,
    };
  },
  onLoad(option) {
    let { brand_id } = this.brandInfo
    this.newsPram.brand_id.push(brand_id)
    // 混合分享信息
    this.shareMixin.title = `新闻列表`;
    this.shareMixin.path = `/News/NewList`;
    // 获取新闻列表
    this.getNewsList();
  },
  methods: {
    // 新闻与活动列表
    async getNewsList(cb) {
      const {
        data: { data, total },
      } = await newsListApi(this.newsPram);
      this.activeList = [...this.activeList, ...data];
      this.total = total;
      cb && cb();
    },
    // 下拉事件
    onPullDownRefresh() {
      flag = true;
      this.activeList = [];
      // 故障列表
      this.newsPram.page = 1
      this.getNewsList(uni.stopPullDownRefresh)
    },
    // 触底事件
    onReachBottom() {
      if (this.activeList.length < this.total) {
        this.newsPram.page++
        // 列表
        this.getNewsList();
      } else {
        if (!flag) return false;
        uni.$showMsg("没有更多数据了!");
        flag = false;
      }
    },
    changeType(e) {
      flag = true;
      this.newsPram.cur_day = e.detail;
      this.activeList = [];
      // 获取活动列表
      this.getNewsList();
    },
    changeId(e) {
      flag = true;
      let { brand_id } = this.brandInfo
      if (e.detail === -1) {
        this.newsPram.brand_id = [1];
        this.newsPram.company_id = "";
      } else if (e.detail === "") {
        this.newsPram.brand_id = [1, brand_id];
        this.newsPram.company_id = "";
      } else {
        this.newsPram.brand_id = [brand_id];
        this.newsPram.company_id = e.detail;
      }
      this.activeList = [];
      // 获取活动列表
      this.getNewsList();
    },
  },
  computed: {
    ...mapState(["centers", 'brandInfo']),
    companyList() {
      let temp = this.centers.map(item => ({
        text: item.text,
        value: item.id
      }))
      return [{ text: "全部", value: "" },
      { text: "锦龙汽车集团", value: -1 },
      ...temp]
    }
  },
};
</script>

<style scoped lang="scss">
uni-popup {
  padding: 20rpx;
}

.centers_item {
  text-align: center;
  font-size: 26rpx;
  line-height: 68rpx;
  border-bottom: 1px solid #eee;
}
</style>
